@import '../../styles/variables.scss';

.m-keymapbox {
	position: relative;
	display: inline-block;

	.m-keymapcanvas {
		position: absolute;
		color: $main-color;
	}

	.col-plugin {
		padding: 10px;
		padding-right: 0;
		cursor: pointer;
	}

	.m-col {
		line-height: 40px;
		background: var(--textBlockQuote-background);
		border-bottom: 1px dotted var(--textBlockQuote-border);

		.cell {
			float: left;
			box-sizing: border-box;
			padding: 0 10px;
			overflow: hidden;
			font-size: 11px;
			text-align: left;
			text-overflow: ellipsis;

			&:first-child {
				width: 40%;
				font-weight: bold;
			}

			&:nth-child(2) {
				width: 40%;
				white-space: nowrap;
				text-align: left;
			}

			&:nth-child(3) {
				width: 20%;
				text-align: right;
			}
		}

		.remove-cell,
		.edit-cell {
			position: absolute;
			top: 14px;
			z-index: 2;
			display: inline-block;
			font-weight: normal;
			line-height: 1;
			cursor: pointer;
		}

		.four-cells {
			.cell {
				&:first-child {
					width: 30%;
					font-weight: bold;
				}
				&:nth-child(2) {
					width: 30%;
					text-align: left;
				}
				&:nth-child(3) {
					width: 20%;
					text-align: right;
				}
				&:nth-child(4) {
					width: 20%;
					text-align: right;
				}
			}
		}

		.remove-cell {
			right: 23px;
		}

		.edit-cell {
			right: 10px;
		}
	}

	.dl {
		.dag-circle {
			cursor: crosshair;
		}
	}
}

.m-buttons {
	padding-top: 10px;
	text-align: center;

	button {
		margin-bottom: 5px;
	}
}
